<div class="ml-2 sm:ml-6 flex items-center" x-data>
  <button
    @click="$store.nav.userSettings.toggleColorScheme()"
    aria-label="Toggle color scheme"
    id="theme-toggle"
    type="button"
    class="inline-flex cursor-pointer items-center p-2 bg-orange-600 hover:bg-orange-700 dark:bg-gray-600 dark:hover:bg-gray-700 border border-transparent rounded-full shadow-sm text-white hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
    <svg
      aria-hidden="true"
      class="w-3 h-3 sm:w-5 sm:h-5"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg">
      <path
        x-show="$store.nav.userSettings.colorScheme() == 1"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      <path
        x-show="$store.nav.userSettings.colorScheme() == 2"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
      <path
        x-show="$store.nav.userSettings.colorScheme() == 3"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
    </svg>
  </button>
</div>
